---
type: integration
title: '@astrojs/alpinejs'
description: Lerne wie du die @astrojs/alpinejs-Integration in deinem Astro-Projekt verwendest.
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/alpinejs/'
category: renderer
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Diese **[Astro-Integration][astro-integration]** erlaubt dir, [Alpine.js](https://alpinejs.dev/) hinzuzufügen, sodass du Alpine.js überall auf deiner Seite verwenden kannst.

## Installation

Astro enthält einen `astro add`-Befehl, um die Einrichtung offizieller Integrationen zu automatisieren. Wenn du es bevorzugst, kannst du die Integrationen stattdessen auch [manuell installieren](#manuelle-installation).

Um `@astrojs/alpinejs` zu installieren, führe den folgenden Befehl in deinem Projektstamm&shy;verzeichnis aus und folge den Anweisungen:

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npx astro add alpinejs
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm astro add alpinejs
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn astro add alpinejs
    ```
  </Fragment>
</PackageManagerTabs>

Wenn du auf Probleme stößt, [kannst du sie uns gerne auf GitHub melden](https://github.com/withastro/astro/issues) und versuche stattdessen die manuellen Installationsschritte unten.

### Manuelle Installation

Als Erstes musst du das `@astrojs/alpinejs`-Paket installieren.

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npm install @astrojs/alpinejs
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm add @astrojs/alpinejs
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn add @astrojs/alpinejs
    ```
  </Fragment>
</PackageManagerTabs>

Die meisten Paketmanager installieren auch die zugehörigen Peer-Abhängigkeiten. Wenn du jedoch beim Starten von Astro die Warnung "Cannot find package 'alpinejs'" (oder eine ähnliche Meldung) erhältst, musst du Alpine.js manuell installieren:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install alpinejs @types/alpinejs
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add alpinejs @types/alpinejs
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add alpinejs @types/alpinejs
  ```
  </Fragment>
</PackageManagerTabs>

Wende dann die Integration auf die Datei `astro.config.*` an, indem du die Eigenschaft `integrations` verwendest:

```js ins="alpine()" title="astro.config.mjs" ins={2}
import { defineConfig } from 'astro/config';
import alpine from '@astrojs/alpinejs';

export default defineConfig({
  // ...
  integrations: [alpine()],
});
```

## Konfiguration

### `entrypoint`

Du kannst Alpine erweitern, indem du die Option `entrypoint` auf einen root-relativen Import-Spezifizierer setzt (z.B. `entrypoint: "/src/entrypoint"`).

Der Standard-Export dieser Datei sollte eine Funktion sein, die eine Alpine-Instanz vor dem Start akzeptiert. Dies ermöglicht die Verwendung von benutzerdefinierten Direktiven, Plugins und anderen Anpassungen für erweiterte Anwendungsfälle.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import alpine from '@astrojs/alpinejs';

export default defineConfig({
  // ...
  integrations: [alpine({ entrypoint: '/src/entrypoint' })],
});
```

```js title="src/entrypoint.ts"
import type { Alpine } from 'alpinejs'
import intersect from '@alpinejs/intersect'

export default (Alpine: Alpine) => {
    Alpine.plugin(intersect)
}
```

## Anwendung

Sobald die Integration installiert ist, kannst du [Alpine.js](https://alpinejs.dev/)-Direktiven und Syntax in jeder Astro-Komponente verwenden. Das Alpine.js-Skript wird automatisch hinzugefügt und auf jeder Seite deiner Website aktiviert. Füge das Plugin-Skripte in das `<head>`-Element der Seite ein.

Das folgende Beispiel fügt [Alpines Collapse-Plugin](https://alpinejs.dev/plugins/collapse) hinzu, um Absatztext ein- und auszublenden:

```astro title="src/pages/index.astro" ins={6} ins="x-collapse"
---
---
<html>
	<head>
		<!-- ... -->
		<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
	</head>
	<body>
    <!-- ... -->
		<div x-data="{ expanded: false }">
			<button @click="expanded = ! expanded">Toggle Content</button>

			<p id="foo" x-show="expanded" x-collapse>
        Lorem ipsum
			</p>
		</div>
	</body>
</html>
```
`
## Intellisense für TypeScript

Die `@astrojs/alpine`-Integration fügt `Alpine` zum globalen `window`-Objekt hinzu. Für die IDE-Autovervollständigung, füge das Folgende zu `src/env.d.ts` hinzu:

```ts title="src/env.d.ts"
interface Window {
  Alpine: import('alpinejs').Alpine;
}
```

## Beispiele

* Das [Astro-Alpine.js-Beispiel](https://github.com/withastro/astro/tree/latest/examples/framework-alpine) zeigt, wie man Alpine.js in einem Astro-Projekt verwendet.

[astro-integration]: /de/guides/integrations-guide/

[astro-ui-frameworks]: /de/guides/framework-components/#using-framework-components
